<template>
<div style="font-size: 12px;">
	    <el-dialog title="交换机" size="small" :visible.sync="show">
		<el-form :model="info" ref="info" :rules="rules">
			<el-row :gutter="24" style="margin-bottom: 0px;padding-top:10px;border-top: 1px solid #dfe6ec;"> 
				<el-col :xs="8" :sm="8" :md="8" :lg="8">
					<el-form-item prop="device_base.eqptType" label="设备类型" :label-width="'35%'" style="margin: 0;margin-bottom:5px;">
						<el-select v-model="info.device_base.eqptType" placeholder="请选择设备类型" :style=""
							:disabled="disable.eqptType ? true : false">
	                        <el-option v-for="list in select.eqptType" :key="list.id" :label="list.dictValue" :value="list.dictKey.toString()"></el-option>
	                    </el-select>
	               	</el-form-item>  									
				</el-col>
				<el-col :xs="8" :sm="8" :md="8" :lg="8">
					<el-form-item prop="device_base.brandId" label="品牌名称" :label-width="'35%'" style="margin-left: 0;margin-bottom:5px;">
						<el-select v-model="info.device_base.brandId" placeholder="请选择品牌名称" :style="">
	                        <el-option v-for="list in select.brandType" :key="list.brandId" :label="list.brandName" :value="list.brandId.toString()"></el-option>
	                    </el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="8" :sm="8" :md="8" :lg="8"> 
					<el-form-item prop="device_base.modelId" label="设备型号" :label-width="'35%'" style="margin-left: 0;margin-bottom:5px;">
						<el-select v-model="info.device_base.modelId" placeholder="请选择设备型号" :style="">
	                        <el-option v-for="list in select.model" :key="list.modelId" :label="list.modelName" :value="list.modelId.toString()"></el-option>
	                    </el-select>
		            </el-form-item>				
				</el-col>										 
			</el-row>
			<el-row :gutter="24" style="border-bottom: 1px solid #dfe6ec;margin-bottom:5px;"> 
				<el-col :xs="8" :sm="8" :md="8" :lg="8">
					<el-form-item prop="device_base.snNum" label="SN编号" :label-width="'35%'" style="margin-left: 0;margin-bottom:5px;">
						<el-input v-model="info.device_base.snNum" placeholder="请输入SN编号"></el-input>
					</el-form-item>  									
				</el-col>
				<el-col :xs="8" :sm="8" :md="8" :lg="8">
		               <el-form-item prop="device_base.eqptSpec" label="设备规格" :label-width="'35%'" style="margin-left: 0;margin-bottom:5px;">
						<el-select v-model="info.device_base.eqptSpec" placeholder="请选择设备规格" :style="">
	                        <el-option v-for="list in select.eqptSpec" :key="list.id" :label="list.dictValue" :value="list.dictKey.toString()"></el-option>
	                    </el-select>
		               </el-form-item>
				</el-col>
				<el-col :xs="8" :sm="8" :md="8" :lg="8"> 
				</el-col>										 
			</el-row>
			<el-row :gutter="24" style="border-bottom: 1px solid #dfe6ec;margin-bottom:5px;"> 
				<el-col :xs="8" :sm="8" :md="8" :lg="8">
					<el-form-item prop="device_switch.interfaceNum" label="接口数量" :label-width="'35%'" style="margin-left: 0;margin-bottom:5px;">
						<el-input v-model="info.device_switch.interfaceNum" placeholder="请输入接口数量"></el-input>
					</el-form-item>  									
				</el-col>
				<el-col :xs="8" :sm="8" :md="8" :lg="8">
					<el-form-item prop="device_switch.g40Num" label="40G接口数量" :label-width="'35%'" style="margin-left: 0;margin-bottom:5px;">
						<el-input v-model="info.device_switch.g40Num" placeholder="请输入40G接口数量"></el-input>
					</el-form-item>  									
				</el-col>
				<el-col :xs="8" :sm="8" :md="8" :lg="8">
					<el-form-item prop="device_switch.moduleNum" label="光模块" :label-width="'35%'" style="margin-left: 0;margin-bottom:5px;">
						<el-input v-model="info.device_switch.moduleNum" placeholder="请输入光模块"></el-input>
					</el-form-item>  									
				</el-col>								
			</el-row>									
		</el-form>			
        <div slot="footer" class="dialog-footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>
<style>
</style>
<script>
export default {
	name : 'switch-manage',
	props : {
		switchDevice : {
			type : Object,
			default : null
		},
	},
	data () {
		return {
			show : false,
			operate : 'New',
			disable : {},
			select : {
				eqptType : '',
				brandType : '',
				model : '',
				eqptSpec : '',
				cpuBrands : '',
				memoryBrands : '',
				sourceBrands : '',
				netCardBrands : '',
				hardDiskBrands : ''
			},
			temp : {},
			info : {
				device_base : {
					"modelName" : "",
					"brandName" : "",
					"eqptSpec" : "",
					"specName" : "",
					"modelId" : '',
					"brandId" : "",
					"typeName" : "",
					"eqptType" : "",
					"snNum" : ""
				},
				device_switch : {
					"hostName" : "",
					"manageIp" : "",
					"g40Num" : '',
					"purpose" : "",
					"moduleNum" : '',
					"interfaceNum" : ''
				}
			},
			rules : {
				'device_base.eqptType' : [
					{
						required : true,
						message : ''
					},
				],
				'device_base.brandId' : [
					{
						required : true,
						message : ''
					},
				],
				'device_base.modelId' : [
					{
						required : true,
						message : ''
					},
				],
				'device_base.snNum' : [
					{
						required : true,
						message : ''
					},
				],
				'device_base.eqptSpec' : [ {
					required : true,
					message : ''
				} ],
				'device_switch.hostName' : [ {
					required : true,
					message : ''
				} ],
				'device_switch.manageIp' : [ {
					required : true,
					message : ''
				} ],
				'device_switch.g40Num' : [ {
					required : true,
					message : ''
				} ],
				'device_switch.purpose' : [ {
					required : true,
					message : ''
				} ],
				'device_switch.moduleNum' : [ {
					required : true,
					message : ''
				} ],
				'device_switch.interfaceNum' : [ {
					required : true,
					message : ''
				} ],
			},
		}
	},
	watch : {
		'info.device_base.eqptType' : function(val, old) {
			if (val === old) return;
			this.disable.eqptType = true;
			if (this.select.eqptType) {
				this.select.eqptType.forEach(e => {
					if (e.dictKey === val) {
						this.info.device_base.typeName = e.dictValue;
					}
				});
			}
			this.getBrands(val).then(_ => {
				if (this.select.brandType) {
					let exist = false;
					if (this.temp.deviceBaseBrandId) {
						this.info.device_base.brandId = this.temp.deviceBaseBrandId + '';
						this.temp.deviceBaseBrandId = null;
					}
					this.select.brandType.forEach((b) => {
						if (parseInt(b.brandId) === parseInt(this.info.device_base.brandId) && b.brandName === this.info.device_base.brandName) {
							exist = true;
						}
					});
					if (!exist) {
						this.info.device_base.brandId = '';
					}
				}
			});
		},
		'info.device_base.brandId' : function(val, old) {
			if (val === old) return;
			if (this.select.brandType) {
				this.select.brandType.forEach(e => {
					if (String(e.brandId) === String(val)) {
						this.info.device_base.brandName = e.brandName;
					}
				});
				this.getModels(val).then(_ => {
					if (this.temp.deviceBaseModelId) {
						this.info.device_base.modelId = this.temp.deviceBaseModelId + '';
						this.temp.deviceBaseModelId = null;
					}
					if (this.select.model) {
						let exist = false;
						this.select.model.forEach((b) => {
							if (parseInt(b.modelId) === parseInt(this.info.device_base.modelId) && b.modelName === this.info.device_base.modelName) {
								exist = true;
							}
						});
						if (!exist) {
							this.info.device_base.modelId = '';
						}
					}
				});
			} else {
				this.temp.deviceBaseBrandId = val && val !== '' ? val + '' : this.temp.deviceBaseBrandId;
				this.info.device_base.brandId = '';
			}
		},
		'info.device_base.modelId' : function(val, old) {
			if (val === old) return;
			if (this.select.model) {
				this.select.model.forEach(e => {
					if (e.modelId === val) {
						this.info.device_base.modelName = e.modelName;
					}
				});
			} else {
				this.temp.deviceBaseModelId = val && val !== '' ? val : this.temp.deviceBaseModelId;
				this.info.device_base.modelId = '';
			}
		}
	},
	created : function() {
		this.init();
		this.disable.eqptType = true;
	},
	mounted : function() {
		if (this.switchDevice) {
			this.disable.eqptType = false;
			this.info.device_base = this.switchDevice.deviceBase ? this.switchDevice.deviceBase : this.info.device_base;
			this.info.device_switch = this.switchDevice.deviceSwitch ? this.switchDevice.deviceSwitch : this.info.device_switch;
			this.operate = 'Update';
		} else {
			this.operate = 'New';
		}	
	},
	updated : function() {
		if(!this.switchDevice) {
			this.info.device_base.eqptType = '2';
		}
	},
	methods : {
		init : function() {
			this.dict.get('eqpt_type').then(response => {
				this.select.eqptType = response;
			}).catch(error => {
				console.log(JSON.stringify(error))
			});
			this.dict.get('eqpt_spec').then(response => {
				this.select.eqptSpec = response;
			}).catch(error => {
				console.log(JSON.stringify(error))
			});
		},
		getBrands : function(val) {
			const _url = '/resman/brands?eqptType=' + val;
			return this.$http.get(_url).then((response) => {
				if (response.code === 0) {
					if (val === '9') {
						this.select.sourceBrands = response.data;
					} else if (val === '8') {
						this.select.hardDiskBrands = response.data;
					} else if (val === '7') {
						this.select.memoryBrands = response.data;
					} else if (val === '6') {
						this.select.cpuBrands = response.data;
					} else if (val === '10') {
						this.select.netCardBrands = response.data;
					} else {
						this.select.brandType = response.data;
					}
				} else {
					console.log(response.statusText)
				}
			}).catch((response) => {
				setTimeout(() => {
				}, 400);
				console.log(response)
			});
		},
		getModels : function(val) {
			const _url = '/resman/models?eqptType=' + this.info.device_base.eqptType + '&brandId=' + val;
			return this.$http.get(_url).then((response) => {
				if (response.code === 0) {
					response.data.forEach(d => {
						d.modelId = String(d.modelId);
					});
					this.select.model = response.data;
				} else {
				}
			}).catch((response) => {
				setTimeout(() => {
				}, 400);
				console.log(response)
			});
		},
		getUnitName : function(val, idx, array) {
			array.forEach(c => {
				if (String(c.brandId) === String(val)) {
					this.info.device_unit[idx].brandName = c.brandName;
				}
			});
		},
		showWarning : function(msg, title) {
			this.$alert(msg, title, {
				showConfirmButton : false,
				showCancelButton : true,
				cancelButtonText : '关闭',
				type : 'warning'
			});
		},
		showSuccess : function(msg, title) {
			this.$alert(msg, title, {
				showConfirmButton : true,
				showCancelButton : false,
				confirmButtonText : '确定',
				type : 'success',
				callback : action => {
					this.show = false;
					this.$emit('success', this.info);
				}
			});
		},
		submitForm : function() {
			this.$refs['info'].validate((valid) => {
				if (valid) {
					let _url = '';
					if (this.operate === 'New') {
						_url += '/resman/device/switch';
						this.$http.post(_url, this.info)
							.then((response) => {
								if (response.code === 0) {
									this.showSuccess('操作已成功', '');
								} else {
									this.showWarning(response.msg, '创建失败');
								}
							}).catch((response) => {
							console.log(response)
						})
					} else if (this.operate === 'Update') {
						_url += '/resman/device/switch';
						this.$http.put(_url, this.info).then((response) => {
							if (response.code === 0) {
								this.showSuccess('操作已成功', '');
							} else {
								this.showWarning(response.msg, '修改失败');
							}
						}).catch((response) => {
							console.log(response)
						})
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	},
}	
</script>